<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #app{
            margin-left: 30px;
        }
        #system-parameters-data-div{
            margin: auto auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="system-parameters-data-div">
        <template>
            <el-table
                    :data="pageBean.data"
                    style="width: 100%">
                <el-table-column
                        prop="paramtype"
                        label="参数类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="paramvalue"
                        label="参数值"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="disvalue"
                        label="显示值">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
                <el-table-column
                        label="更改">
                    <template slot-scope="scope">
                         <el-button type="primary" icon="el-icon-edit" circle @click="toModify(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

    <!--  分页  -->
    <template style="margin: 20px auto;">
        <div class="block" >
            <span class="demonstration">显示总数</span>
            <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    :page-size="5"
                    :total="pageBean.totalCount">
            </el-pagination>
        </div>
    </template>

    <!--    修改Form    -->
    <el-dialog title="更改系统参数" ref="form" :visible.sync="dialogFormVisible">
        <el-form :model="modifySystemParas">
            <el-form-item label="编号" :label-width="formLabelWidth">
                <el-input v-model="modifySystemParas.id" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="参数类型" :label-width="formLabelWidth">
                <el-input v-model="modifySystemParas.paramtype" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="参数值" :label-width="formLabelWidth">
                <el-input v-model="modifySystemParas.paramvalue" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="显示值" :label-width="formLabelWidth">
                <el-input v-model="modifySystemParas.disvalue" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="modifySystemParas.remark" autocomplete="off" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            systemParas: [],
            dialogFormVisible:false,
            formLabelWidth:"120px",
            pageBean: {
                totalPageCount: 0, //总页数
                totalCount: 0,     //记录总数
                data: [],          //总条数
                page: 0            //当前页号
            },
            modifySystemParas: {
                id:"",
                paramtype:"",
                paramvalue:"",
                disvalue:"",
                remark:""
            },
        },
        methods: {
            // 查询所有
            queryAll(){
                let _this = this;
                selectAjax("get","/parametertable/list",{},function result(data){
                    _this.systemParas = data.data;
                    _this.pageBean.totalCount = data.data.length;
                    _this.pageBean.page = 1;
                    _this.subData();
                });

            },
            // 截取数据
            subData(){
                this.pageBean.data = this.systemParas.slice((this.pageBean.page-1)*5,this.pageBean.page*5);
            },
            handleCurrentChange(val) {
                this.pageBean.page = window.parseInt(val);
                this.subData();
            },

            // 前往更改
            toModify(data){
                let _this = this;

                // _this.modifySystemParas.id = data.id;
                // _this.modifySystemParas.paramtype = data.paramtype;
                // _this.modifySystemParas.paramvalue = data.paramvalue;
                // _this.modifySystemParas.disvalue = data.disvalue;
                // _this.modifySystemParas.remark = data.remark;

                _this.modifySystemParas = data;

                _this.dialogFormVisible = true;
            },

            // 提交查询
            modify(){
                console.log(this.modifySystemParas);
                addOrUpdateAjax("put","/parametertable/update",vm.modifySystemParas,function(data){
                    vm.queryAll();

                    // vm.modifySystemParas.forEach((k,v)=>{
                    //     vm.modifySystemParas[k] = "";
                    // });
                    //
                    // vm.modifySystemParas.empty();

                    vm.$refs["form"].resetFields();

                    vm.dialogFormVisible = false;

                    console.log(vm.modifySystemParas)
                });
            }
        },

        mounted(){
            this.queryAll();
        }
    });
</script>
</body>
</html>